<template>
	<div class="check-data-detail">
		<div class="list">
			<div
				class="item"
				v-for="(item, index) in dataEnum"
				:key="index"
			>
				<h3>{{ item.label }}</h3>
				<div class="data">
					<div class="text">
						<p>是否存在隐患：</p>
						<p>{{ booleanEnum[detail?.[item.value]] || '-' }}</p>
					</div>
					<div class="text" v-if="+detail?.[item.value] === 1">
						<p>隐患描述：</p>
						<p>{{ detail?.[item.desc] || '-' }}</p>
					</div>
					<div class="images" v-if="detail?.[item.image]">
						<van-image
							v-for="(image, index) in detail?.[item.image]?.split('|')"
							:key="index"
							:src="image"
							@click="onPreview(detail?.[item.image]?.split('|'), index)"
						/>
					</div>
					<div class="text" v-if="+detail?.[item.value] === 1">
						<p>整改情况：</p>
						<p>{{ zgEunm[detail?.[item.zgValue]] || '-' }}</p>
					</div>
					<div class="text" v-if="+detail?.[item.zgValue] === 1 && [0, 1].includes(index)">
						<p>{{ zgCountEnum[index + 1] }}：</p>
						<p>{{ detail?.[item.count] ?? '-' }}</p>
					</div>
					<div class="images" v-if="+detail?.[item.zgValue] === 1">
						<van-image
							v-for="(image, index) in detail?.[item.zgImage]?.split('|')"
							:key="index"
							:src="image"
							@click="onPreview(detail?.[item.zgImage]?.split('|'), index)"
						/>
					</div>
				</div>
			</div>

			<div class="item">
				<h3>签字信息</h3>
				<div class="sign">
					<van-image :src="detail?.sign" />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { defineProps } from 'vue'
import { ImagePreview } from 'vant'

defineProps({
	detail: {
		type: Object,
		default: () => {}
	}
})

const booleanEnum = {
	0: '否',
	1: '是',
	2: '不涉及',
}
const zgEunm = {
	1: '已整改',
	0: '未整改',
}
const	zgCountEnum = {
	1: '自行清理电动车数量(个)',
	2: '自行清理液化石油气数量',
}
const dataEnum = [
	{
		label: '电动自行车、电动助力车、电动平衡车等需要充电车辆及其电池在室内及安全出口处停放、充电',
		value: 'useElectricBicycle',
		image: 'useElectricBicyclePhoto',
		desc: 'useElectricBicycleMsg',
		zgValue: 'useElectricBicycleZgqk',
		zgImage: 'useElectricBicycleZgPhoto',
		count: 'zxqlddcsl',
	},
	{
		label: '在公共区域、租住房间内、地下室使用瓶装液化石油气',
		value: 'useBottledLiquefiedGas',
		image: 'useBottledLiquefiedGasPhoto',
		desc: 'useBottledLiquefiedGasMsg',
		zgValue: 'useBottledLiquefiedGasZgqk',
		zgImage: 'useBottledLiquefiedGasZgPhoto',
		count: 'zxqlyhsyqsl'
	},
	{
		label: '疏散走道、楼梯间、安全出口处堆放物品影响人员疏散',
		value: 'useStackedItems',
		image: 'useStackedItemsPhoto',
		desc: 'useStackedItemsMsg',
		zgValue: 'useStackedItemsZgqk',
		zgImage: 'useStackedItemsZgPhoto',
	},
	{
		label: '私拉乱接电线',
		value: 'slljdx',
		image: 'slljdxPhoto',
		desc: 'slljdxMsg',
		zgValue: 'slljdxZgqk',
		zgImage: 'slljdxZgPhoto',
	},
	{
		label: '灭火器未保存完好有效',
		value: 'mhqwbcwhyx',
		image: 'mhqwbcwhyxPhoto',
		desc: 'mhqwbcwhyxMsg',
		zgValue: 'mhqwbcwhyxZgqk',
		zgImage: 'mhqwbcwhyxZgPhoto',
	},
	{
		label: '是否存在窗口防护网、广告牌、铁栅栏',
		value: 'sfczckfhwggptzl',
		image: 'sfczckfhwggptzlPhoto',
		desc: 'sfczckfhwggptzlMsg',
		zgValue: 'sfczckfhwggptzlZgqk',
		zgImage: 'sfczckfhwggptzlZgPhoto',
	},
	{
		label: '简易喷淋灭火系统未保持完好有效',
		value: 'jyplmhxtwbcwhyx',
		image: 'jyplmhxtwbcwhyxPhoto',
		desc: 'jyplmhxtwbcwhyxMsg',
		zgValue: 'jyplmhxtwbcwhyxZgqk',
		zgImage: 'jyplmhxtwbcwhyxZgPhoto',
	},
	{
		label: '烟感报警器未保持完好有效',
		value: 'ygbjwfwhyx',
		image: 'ygbjwfwhyxPhoto',
		desc: 'ygbjwfwhyxMsg',
		zgValue: 'ygbjwfwhyxMsgZgqk',
		zgImage: 'ygbjwfwhyxMsgZgPhoto',
	}
]

const onPreview = (images, index) => {
	ImagePreview({
		images,
		startPosition: index,
		closeable: true
	})
}
</script>

<style scoped lang="less">
.check-data-detail {
	padding: 24px 0;
	.list {
		padding: 0 24px;
		.data {
			background: #fff;
			display: flex;
			flex-direction: column;
			gap: 12px;
			border-radius: 12px;
			padding: 24px;
			.text {
				display: flex;
				p {
					min-height: 44px;
					line-height: 44px;
					&:nth-of-type(1) {
						color: var(--content-color);
					}
					&:nth-of-type(2) {
						width: 0;
						flex: 1;
					}
				}
			}

			.images {
				display: flex;
				flex-wrap: wrap;
				.van-image {
					width: calc(calc(100% - 96px) / 5);
					aspect-ratio: 1;
					border-radius: 8px;
					margin: 24px 24px 0 0;
					overflow: hidden;
					&:nth-of-type(5n) {
						margin-right: 0;
					}
					&:nth-of-type(-n+5) {
						margin-top: 0;
					}
				}
			}
		}
		.sign {
			background: #fff;
			border-radius: 12px;
			width: 100%;
			:deep(.van-image) {
				width: 100%;
				min-height: 300px;
			}
		}
	}

	h3 {
		padding: 20px 0 12px 0;
		position: relative;
		text-indent: 10px;
		&:before {
			position: absolute;
			content: '';
			height: 30px;
			top: 44px;
			transform: translateY(-50%);
			width: 6px;
			border-radius: 3px;
			left: 0px;
			background: var(--van-primary-color);
		}
	}
}
</style>
